<template>
    <div>
        <div>
            <input type="range" v-model="TRX" max="700" min="-700">{{TRX}}
            <input type="button" @click="runTRX" value="run"><br>

            <input type="range" v-model="TRY" max="700" min="-700">{{TRY}}
            <input type="button" @click="runTRY" value="run"><br>

            <input type="range" v-model="TRZ" max="700" min="-700">{{TRZ}}
            <input type="button" @click="runTRZ" value="run"><br>

            <input type="range" v-model="deg" max="200" min="-200">{{deg}}deg
            <input type="button" @click="runDEG" value="run"><br>

            <input type="range" v-model="tsZ" max="500" min="-100">{{tsZ}}tsZ
            <input type="button" @click="runTsZ" value="run"><br>

            <button @click="reset">@_@</button>
        </div>
        <div class="camera">
            <div class="fiveRubik"
                 :style="{transform: `rotateX(${TRX}deg) rotateY(${TRY}deg) rotateZ(${TRZ}deg) `}">
                <div class="point"></div>
                <!--球五边形中心坐标-->



                <div v-html="str"
                     :style="{transform: `
                 rotate3d(-47.553,34.549,0,${deg}deg)
                 translateZ(${tsZ}px) `,
                 position:'absolute'
                 }"
                     class="setSVG setSVGRgb">
                </div>
                <div v-html="str"
                     :style="{transform: `
                 rotate3d(47.553,34.549,0,${deg*-1}deg)
                 translateZ(${tsZ}px) `,
                 position:'absolute'
                 }"
                     class="setSVG setSVGRgb">
                </div>

                <div v-html="str"
                     :style="{transform: `
                 rotate3d(18.163,55.901,0,${deg}deg)
                 translateZ(${tsZ}px) `,
                 position:'absolute'
                 }"
                     class="setSVG setSVGRgb">
                </div>

                <div v-html="str"
                     :style="{transform: `
                 rotate3d(58.779,0,0,${deg}deg)
                 translateZ(${tsZ}px) `,
                 position:'absolute'
                 }"
                     class="setSVG setSVGRgb">
                </div>

                <div v-html="str"
                     :style="{transform: `
                 rotate3d(17.611,-56.45,0,${deg}deg)
                 translateZ(${tsZ}px) `,
                 position:'absolute'
                 }"
                     class="setSVG setSVGRgb"
                >
                </div>





                <div v-html="str"
                     :style="{transform: `
                 rotate3d(-47.553,34.549,0,${deg}deg)
                 translateZ(${tsZ*-1}px) `,
                 position:'absolute'
                 }"
                     class=" setSVGRgb">
                </div>
                <div v-html="str"
                     :style="{transform: `
                 rotate3d(47.553,34.549,0,${deg*-1}deg)
                 translateZ(${tsZ*-1}px) `,
                 position:'absolute'
                 }"
                     class=" setSVGRgb">
                </div>

                <div v-html="str"
                     :style="{transform: `
                 rotate3d(18.163,55.901,0,${deg}deg)
                 translateZ(${tsZ*-1}px) `,
                 position:'absolute'
                 }"
                     class=" setSVGRgb">
                </div>

                <div v-html="str"
                     :style="{transform: `
                 rotate3d(58.779,0,0,${deg}deg)
                 translateZ(${tsZ*-1}px) `,
                 position:'absolute'
                 }"
                     class=" setSVGRgb">
                </div>

                <div v-html="str"
                     :style="{transform: `
                 rotate3d(17.611,-56.45,0,${deg}deg)
                 translateZ(${tsZ*-1}px) `,
                 position:'absolute'
                 }"
                     class=" setSVGRgb"
                >
                </div>




                <div v-html="str"
                     :style="{transform: `
                 translateZ(${tsZ}px)
                 rotateX(0deg) rotateY(0deg) rotateZ(0deg) `,
                 position:'absolute'
                 }">
                </div>


                <div v-html="str"
                     :style="{transform: `
                 translateZ(-${tsZ}px)
                 rotateX(0deg) rotateY(0deg) rotateZ(36deg) `,
                 position:'absolute'
                 }">
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "RegularTwentyAspect",
        data(){
            return {
                runTRXOn:false,
                timerTRX:null,
                runTRZOn:false,
                timerTRZ:null,

                runDEGOn:false,
                timerDEG:null,

                offOrOn:false,
                timer:null,

                offOrOnTsZ:false,
                timerTsZ:null,

                hello:'hello world!',
                TRY:-30,
                TRX:-30,
                TRZ:0,
                tsZ:0,
                deg:0,
                //用内切球半径/指数

                //内切球半径指数
                CBNum:1.11352,
                //外接球半径指数
                //  CSNum:1.40126,

                //圆半径-》棱长-》内切球半径=指数*棱长

                CBR:this.fiveWidth(50)*1.11352,

                mathSin:this.mathSinDeg(36),
                //贴图，用五边形外接圆指数，用圆的半径x，，五边形边长用y=x*sin(36deg)*2
                str:'<svg width="100px" height="100px" version="1.1">\n' +
                    '\n' +
                    '    <polygon points="50,0 97.552,34.549 79.389,90.45 20.61,90.45 2.447,34.549"\n' +
                    '             style="fill:#f09a39;stroke:#000000;stroke-width:1"/>\n' +
                    '\n' +
                    '</svg>'
            }
        },
        methods:{
            runTRX(){
                if(!this.runTRXOn){
                    this.runTRXOn=true;
                    let vm=this;
                    vm.timerTRX=setInterval(function () {
                        vm.TRX=Math.floor(vm.TRX)+10;
                    },1000/50)
                }else{
                    this.runTRXOn=false;
                    clearInterval(this.timerTRX);
                }
            },
            runTRZ(){
                if(!this.runTRZOn){
                    this.runTRZOn=true;
                    let vm=this;
                    vm.timerTRZ=setInterval(function () {
                        vm.TRZ=Math.floor(vm.TRZ)+10;
                    },1000/50)
                }else{
                    this.runTRZOn=false;
                    clearInterval(this.timerTRZ);
                }
            },
            runTRY(){
                if(!this.offOrOn){
                    this.offOrOn=true;
                    let vm=this;
                    vm.timer=setInterval(function () {
                        vm.TRY=Math.floor(vm.TRY)+10;
                    },1000/50)
                }else{
                    this.offOrOn=false;
                    clearInterval(this.timer);
                }

            },
            runTsZ(){

                if(!this.offOrOnTsZ){
                    this.offOrOnTsZ=true;
                    let vm=this;
                    let a=1;
                    vm.timerTsZ=setInterval(function () {
                        if(vm.tsZ>200){
                            a=-1;
                        }else if(vm.tsZ<-66){
                            a=1;
                        }
                        vm.tsZ=Math.floor(vm.tsZ)+a;
                    },1000/30)
                }else{
                    this.offOrOnTsZ=false;
                    clearInterval(this.timerTsZ);
                }

            },
            runDEG(){
                if(!this.runDEGOn){
                    this.runDEGOn=true;
                    let vm=this;
                    vm.timerDEG=setInterval(function () {
                        vm.deg=Math.floor(vm.deg)+1;
                    },1000/50)
                }else{
                    this.runDEGOn=false;
                    clearInterval(this.timerDEG);
                }
            },
            reset(){
                this.TRX=0;
                this.TRY=0;
                this.TRZ=0;
                this.deg=-63;
                this.tsZ=65;
            },
            mathSinDeg(x){//input->角度，output->sin值
                return Math.sin(x*Math.PI/180);
            },
            fiveWidth(x){//input->圆的半径，output-》五边形边长
                //五边形边长
                return x*this.mathSinDeg(36)*2;
            },
            //五边形svg生成函数
            makeFive(x){//圆的半径大小
                let obj=document.createElement('svg');
                obj.style.width=x*2+'px';
                obj.style.height=x*2+'px';

                obj.setAttribute('version','1.1');
                let polygon=document.createElement('polygon');


                let x0=x,y0=x,r=x;
                let pA=this.xyReturn(x0,y0,r,0);
                let pB=this.xyReturn(x0,y0,r,72);
                let pC=this.xyReturn(x0,y0,r,144);
                let pD=this.xyReturn(x0,y0,r,216);
                let pE=this.xyReturn(x0,y0,r,288);
                let str=pA+' '+pB+' '+pC+' '+pD+' '+pE;
                console.log(str);
                polygon.setAttribute('points',str);
                polygon.setAttribute('fill','#f09a39');
                polygon.setAttribute('stroke','#000000');
                polygon.setAttribute('strokeWidth','1');
                obj.appendChild(polygon);
                document.getElementsByTagName('body')[0].appendChild(obj);
            },
            xyReturn(x0,y0,r,deg){
                let hudu = 2*Math.PI/360*deg;
                return Math.floor((x0 + Math.sin(hudu)*r)*1000)/1000+','+ Math.floor((y0 - Math.cos(hudu)*r)*1000)/1000;
            }
        },
        mounted(){
            this.reset();
        }
    }
</script>

<style>
    .camera{
        margin-top: 200px;
        perspective: 500px;
    }
    .fiveRubik{
        width: 100px;
        height: 100px;
        margin: 50px auto;
        /*background-color: #61dafb;*/
        transform-style: preserve-3d;

    }

    .point{
        width: 2px;
        height: 2px;
        background-color: black;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .setSVG svg{
        transform: rotateZ(36deg);
    }
</style>